<template>
    <div>
        <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
            class="demo-ruleForm login-container" style="height: 400px;">
            <h1 class="title">注册</h1>
            <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
                <el-input type="text" v-model="ruleForm.phone" auto-complete="off" placeholder="手机号"></el-input>
            </el-form-item>
         
            <el-select v-model="value" placeholder="部门" style="width: 100%;">
                <el-option v-for="item in department" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-form-item style="width: 100%; margin-top: 20px;">
                <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')"
                    :loading="logining">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
import { register } from "../api/contract";
export default {
    name: "request",
    data() {
        return {
            //定义loading默认为false
            logining: false,
            // 记住密码
            ruleForm: {
                //username和password默认为空
                username: "",
                password: "",
                phone: "",
                randomStr: "",
                codeimg: "",
            },
            department: [{
                value: '研发部',
                label: '研发部'
            }, {
                value: '销售部',
                label: '销售部'
            }, {
                value: '人事部',
                label: '人事部'
            }, {
                value: '采购部',
                label: '采购部'
            }, {
                value: '财务部',
                label: '财务部'
            }],
            value: '',
            label: ''
        };
    },
    methods: {
        // 注册
        submitForm(formName) {
            let data = {
                username: this.ruleForm.username,
                password: this.ruleForm.password,
                phone: this.ruleForm.phone,
                department: this.value,
            }
            
            console.log(data)
            register(data).then(res => {
                if(res.code == 200){
                     this.$router.push("/login");
                     this.$message.success("注册成功")
                }else{
                     this.$message.error("注册失败")
                }
            })
        },
    }
}
</script>

<style>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    margin-top: 150px;
    width: 300px;
    height: 340px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.remember {
    margin: 0px 0px 35px 0px;
}

.code-box {
    text-align: right;
}

.codeimg {
    height: 40px;
}
</style>